<template>
  <div class="login_warp">
    <!-- <m-head title="登录"></m-head> -->
    <div class="log_main">
      <p class="log_top_text">注册</p>
      <div class="log_form">
        <van-form>
          <van-field v-model="account" placeholder="请输入账号" />

          <van-field v-model="password" type="password" placeholder="请输入密码" />

          <van-field type="password" v-model="password2" placeholder="请再次输入密码" />
          <van-field v-model="name" placeholder="请输入姓名" />
          <van-field v-model="mobile" placeholder="手机号" maxlength="11" />
          <van-field v-model="detail" placeholder="请输入地址" />


          <div class="xieyi">注册默认同意<span @click="goAgreement"> 用户协议 </span></div>
          <van-button type="info" @click="onSubmit" block round>注册
          </van-button>
        </van-form>
        <span class="mei">还没账号<em @click="goLogin"> 去登录</em></span>
      </div>
    </div>
  </div>
</template>
<script>
  import Vue from "vue";
  import { Notify } from "vant";

  // import { mapState, mapMutations, mapActions } from 'vuex'
  // import { getDetail } from "@/apiOptions/home_api.js";
  // // import MHead from '@/components/header/header'

  import apiMar from "@/api/api";
  import { Dialog, Button, Form, Field, Toast } from "vant";

  Vue.use(Button)
    .use(Form)
    .use(Field)
    .use(Toast);
  export default {
    components: {
      // MHead
    },
    data() {
      return {
        phoneNum: "",
        VerificationCode: "",
        CodeBtndisabled: true,
        submitBtn: true,
        CodeText: "获取验证码",
        CodeColor: "#C6C9D5", //#07c160
        submitColor: "#C6C9D5",
        submitBg: "#F2F3F7",
        time: 60,

        // zjz
        name: "",
        account: "",
        password: "",
        password2: "",
        detail: "",
        mobile: ""
      };
    },
    computed: {},
    watch: {},
    methods: {
      goAgreement() {
        this.$router.push({
          path: "/agreement"
        });
      },
      goLogin() {
        this.$router.push({
          path: "/login"
        });
      },
      onSubmit() {
        if (
          !(
            this.name &&
            this.account &&
            this.password &&
            this.detail &&
            this.mobile
          )
        ) {
          Notify({
            type: "warning",
            message: "姓名、账号、密码、电话不能为空。"
          });
          return false;
        }
        // if (this.account.length != 11) {
        //   Notify({ type: "warning", message: "账号为11位。" });
        //   return false;
        // }

        if (this.password !== this.password2) {
          Notify({ type: "warning", message: "密码请保持一致。" });
          return false;
        }

        let params = {
          user_name: this.account,
          cust_name: this.name,
          mobile: this.mobile,
          password: this.password,
          detail: this.detail
        };

        apiMar
          .register(params)
          .then(res => {
            Notify({ type: "success", message: "注册成功，请登录。" });
            setTimeout(() => {
              console.log(111);
              this.$router.push({
                path: "/login"
              });
            }, 1500);
          })
          .catch(err => {
            console.log(err, "err");
            Notify({ type: "warning", message: err.message });

            // this.$Message.error(err)
          });
      },
      onFailed(errorInfo) {
        console.log("failed", errorInfo);
      },
      validator(val) {
        return val && val.length == 11;
      },
      blurChange() {
        if (this.password && this.password !== this.password2) {
          this.password1 = "";
          Notify("密码需保持一致。");
        }
      },
      phoneChange(val) {
        console.log(val, "val");
        if (this.account && this.password && this.password && this.password2) {
          this.submitBtn = false;
        }
      },
      // onSubmit(values) {
      //   console.log(values, "onSubmit");
      // console.log('submit', values);
      // this.submitBtn = true
      // let params = {
      //   phone: values.phoneNum,
      //   loginType: 1,
      //   code: values.VerificationCode,
      // }
      // getDetail('/api/tospurWeb/login/appLogin/login', params).then((res) => {
      //   this.$tool.setStorage({ 'M-token': res['X-Token'] });
      //   this.$tool.setStorage({ 'phoneNum': params.phone })
      //   this.$tool.setStorage({ 'userId': res.customerInfo.id })
      //   this.$store.dispatch('saveUserInfo', { Token: res['X-Token'] });
      //   this.$tool.setStorage({ 'userId': res.customerInfo.id })
      //   let token = this.$tool.getToken()

      //   let topath = this.$route.query.topath,
      //     refresh = this.$route.query.refresh;
      //   if (topath && topath.indexOf('http') != -1) {
      //     let topathTmp = topath.indexOf('activityPage') != -1 ?
      //       `${topath.split('#')[0]}&Mtoken= ${this.$tool.getStorage('M-token')}` :
      //       topath
      //     window.location.replace(`${topathTmp}`)
      //     this.submitBtn = false
      //   } else if (refresh || topath) {
      //     window.location.replace(`${location.protocol}//${location.host}/${topath}`)
      //   }
      //   else {
      //     this.$router.back()
      //     this.submitBtn = false
      //   }
      // }).catch(error => {
      //   this.submitBtn = false
      //   Toast(`${error.msg}`)
      // })
      // },
      validatorPhoneNum() {
        if (this.phoneNum) {
          let reg = /^1[3456789]\d{9}$/;
          if (!reg.test(this.phoneNum)) {
            // Toast('请填写正确的手机号')
            this.CodeBtndisabled = true;
            this.CodeColor = "#C6C9D5";
            this.submitBtn = true;
            this.submitBg = "#F2F3F7";
            this.submitColor = "#C6C9D5";
          } else {
            this.CodeBtndisabled = false;
            this.CodeColor = "#00A4FF";
            if (this.VerificationCode) {
              this.submitBtn = false;
              this.submitColor = "#ffffff";
              this.submitBg = "#00A4FF";
            }
          }
        }
      },
      validatorCode() {
        console.log(1);
        if (this.VerificationCode) {
          if (this.phoneNum) {
            let reg = /^1[3456789]\d{9}$/;
            if (reg.test(this.phoneNum)) {
              this.submitBtn = false;
              this.submitColor = "#ffffff";
              this.submitBg = "#00A4FF";
            }
          }
        } else {
          // Toast('请填写验证码')
          this.submitBtn = false;
          this.submitColor = "#C6C9D5";
          this.submitBg = "#F2F3F7";
        }
      },
      runTimer() {
        console.log(123);
        this.getphoneCode();
        this.timer();
      },
      timer() {
        if (this.time > 0) {
          this.time--;
          this.CodeText = `已发送(${this.time}s)`;
          this.timeoutId = setTimeout(this.timer, 1000);
          this.CodeBtndisabled = true;
        } else {
          clearInterval(this.timeoutId);
          this.CodeText = "重新发送";
          this.CodeBtndisabled = false;
          this.time = 60;
        }
      },
      getphoneCode() {
        let params = {
          phone: this.phoneNum
        };
        getDetail("/api/tospurWeb/login/appLogin/sendMessage", params)
          .then(res => {
            console.log(res);
          })
          .catch(error => {
            Toast(`${error.msg}`);
          });
      }
    },
    created() {},
    mounted() {}
  };
</script>

<style lang="scss" scoped>
  .log_top_text {
    text-align: center;
    font-size: 20px;
    line-height: 20px;
    color: #222222;
    font-weight: 700;
    padding: 50px 0;
  }

  .login_warp {
    .log_main {
      padding: 0 40px;
    }
  }

  .mei {
    display: block;
    font-size: 14px;
    color: #333;
    line-height: 2;
    text-align: center;

    em {
      font-style: normal;
      color: #1989fa;
    }
  }

  .xieyi {
    margin-top: 50px;
    text-align: center;
    font-size: 14px;
    color: #333;
    line-height: 2;

    span {
      font-style: normal;
      color: #1989fa;
    }

  }
</style>